<!DOCTYPE html>
<html>
<head>
<!--
	Copyright (c) 2015-2018 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
	<title>ol-ext: Geoportail layer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="Geoportail layer for ol" />
	<meta name="keywords" content="ol, openlayers, layer, source, geoportail" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
	<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
	<script type="text/javascript" src="../../dist/ol-ext.js"></script>

  <!-- filesaver-js -->
	<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

	<link rel="stylesheet" href="../style.css" />
</head>
<body >
	<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

	<a href="../../index.html">
		<h1>ol-ext: Geoportail layer</h1>
	</a>
	<div class="info">
    <p>
    </p>
  </div>

	<!-- DIV pour la carte -->
	<div id="map" style="width: 600px; height: 400px;"></div>
	<div class="options">
    <h2>WFS</h2>
    <ul>
      <li>
        <label>typeName :</label>
        <select id="typename" onchange="setWFS()">
          <option value="BDTOPO_BDD_WLD_WGS84G:route">route</option>
          <option value="BDTOPO_BDD_WLD_WGS84G:chemin">chemin</option>
          <option value="ADMINEXPRESS_COG_2018:commune">commune</option>
          <option value="BDPARCELLAIRE-VECTEUR_WLD_BDD_WGS84G:parcelle">parcelle</option>
          <option value="BDPARCELLAIRE-VECTEUR_WLD_BDD_WGS84G:divcad">divcad</option>
          <option value="BDTOPO_BDD_WLD_WGS84G:bati_indifferencie">bati_indifferencie</option>
          <option value="BDTOPO_BDD_WLD_WGS84G:bati_industriel">bati_industriel</option>
          <option value="BDTOPO_BDD_WLD_WGS84G:bati_remarquable">bati_remarquable</option>
        </select>
      </li>
      <li>
        <label>minZoom:</label>
        <select id="zoom" onchange="setWFS()">
          <option value="15">15</option> 
          <option value="14">14</option> 
          <option value="13">13</option> 
          <option value="12">12</option> 
        </select>
      </li>
      <li>
        <button onclick="vectorSource.clear()">Clear</button>
      </li>
    </ul>
    <p id="curZoom"></p>
    <p id="zoomTo" style="background: yellow; color: red; margin: 0; padding: .5em;">Zoom to display features</p>
	</div>
	
  <script type="text/javascript">
  // Key Capabilities
  if (!window.geoportailConfig) window.geoportailConfig = { capabilities: {} };
  window.geoportailConfig.capabilities['h1osiyvfm7c4wu976jv6gpum'] = {
    "INSEE.FILOSOFI.NIVEAU.DE.VIE.SECRET": {"server":"https://wxs.ign.fr/geoportail/wmts","layer":"INSEE.FILOSOFI.NIVEAU.DE.VIE.SECRET","title":"Niveau de vie winsorisé des individus (secret signalé)","format":"image/png","style":"CARROYAGE INSEE NIVEAU DE VIE SECRET","queryable":true,"tilematrix":"PM","minZoom":6,"maxZoom":16,"bbox":[-63.37252,-21.475586,55.925865,51.31212],"desc":"Niveau de vie des individus, retraité des valeurs extrêmes (les cases hachurées correspondent aux données secrétisées)","originators":{"IGN":{"href":"http://www.ign.fr","attribution":"Institut national de l'information géographique et forestière","logo":"https://wxs.ign.fr/static/logos/IGN/IGN.gif","minZoom":6,"maxZoom":16,"constraint":[{"minZoom":6,"maxZoom":16,"bbox":[-63.37252,-21.475586,55.925865,51.31212]}]}}},
    "INSEE.FILOSOFI.ENFANTS.0.17.ANS.SECRET": {"server":"https://wxs.ign.fr/geoportail/wmts","layer":"INSEE.FILOSOFI.ENFANTS.0.17.ANS.SECRET","title":"% des 0-17 ans  (secret signalé)","format":"image/png","style":"CARROYAGE INSEE PART ENFANTS 0 A 17 ANS SECRET","queryable":true,"tilematrix":"PM","minZoom":6,"maxZoom":16,"bbox":[-63.37252,-21.475586,55.925865,51.31212],"desc":"Nombre d’individus âgés de 0 à 17 ans dans la population (les cases hachurées correspondent aux données secrétisées)","originators":{"IGN":{"href":"http://www.ign.fr","attribution":"Institut national de l'information géographique et forestière","logo":"https://wxs.ign.fr/static/logos/IGN/IGN.gif","minZoom":6,"maxZoom":16,"constraint":[{"minZoom":6,"maxZoom":16,"bbox":[-63.37252,-21.475586,55.925865,51.31212]}]}}},
    "INSEE.FILOSOFI.PART.PLUS.65.ANS.SECRET": {"server":"https://wxs.ign.fr/geoportail/wmts","layer":"INSEE.FILOSOFI.PART.PLUS.65.ANS.SECRET","title":"% des plus de 65 ans (secret signalé)","format":"image/png","style":"CARROYAGE INSEE PART PLUS 65 ANS SECRET","queryable":true,"tilematrix":"PM","minZoom":6,"maxZoom":16,"bbox":[-63.37252,-21.475586,55.925865,51.31212],"desc":"Nombre d’individus âgés de plus de 65 ans dans la population (les cases hachurées correspondent aux données secrétisées)","originators":{"IGN":{"href":"http://www.ign.fr","attribution":"Institut national de l'information géographique et forestière","logo":"https://wxs.ign.fr/static/logos/IGN/IGN.gif","minZoom":6,"maxZoom":16,"constraint":[{"minZoom":6,"maxZoom":16,"bbox":[-63.37252,-21.475586,55.925865,51.31212]}]}}},
    "INSEE.FILOSOFI.POPULATION": {"server":"https://wxs.ign.fr/geoportail/wmts","layer":"INSEE.FILOSOFI.POPULATION","title":"Densité de population","format":"image/png","style":"CARROYAGE INSEE POPULATION","queryable":true,"tilematrix":"PM","minZoom":6,"maxZoom":16,"bbox":[-63.37252,-21.475586,55.925865,51.31212],"desc":"Nombre d'individus par km²","originators":{"IGN":{"href":"http://www.ign.fr","attribution":"Institut national de l'information géographique et forestière","logo":"https://wxs.ign.fr/static/logos/IGN/IGN.gif","minZoom":6,"maxZoom":16,"constraint":[{"minZoom":6,"maxZoom":16,"bbox":[-63.37252,-21.475586,55.925865,51.31212]}]}}},
    "Aire-Parcellaire": {"server":"https://wxs.ign.fr/geoportail/wmts","layer":"Aire-Parcellaire","title":"Délimitation parcellaire AOC viticole","format":"image/png","style":"normal","queryable":true,"tilematrix":"PM","minZoom":0,"maxZoom":18,"bbox":[-5.1504726,41.32521,9.570543,51.099052],"desc":"<![CDATA[Selon les règlements européens n°110/2008 du 15 janvier 2008, n°1151/2012 du 21 novembre 2012 et n°1308/2013 de l’OCM , le cahier des charges des appellations définit l’aire géographique. Le terme de « délimitation parcellaire » désigne une aire qui repose sur les limites administratives du cadastre (les parcelles) et dont le maillage suffisamment fin permet de tenir compte de variations très localisées des éléments du milieu physique. Elle correspond à l'aire de production de la matière première. Elle est incluse dans l'aire géographique.\n\nDonnées produites par l'Institut National des Origines et la Qualité (INAO)]]>","originators":{"IGN":{"href":"http://www.ign.fr","attribution":"Institut national de l'information géographique et forestière","logo":"https://wxs.ign.fr/static/logos/IGN/IGN.gif","minZoom":0,"maxZoom":18,"constraint":[{"minZoom":0,"maxZoom":18,"bbox":[-5.1504726,41.32521,9.570543,51.099052]}]}}},
  };
	// The map
	var map = new ol.Map ({
    target: 'map',
    view: new ol.View ({
      zoom: 15,
      center: [261204.43490751847, 6250258.191535994]
    })
  });

  map.addControl(new ol.control.LayerSwitcher());
  map.addControl(new ol.control.Permalink());
  map.addControl(new ol.control.ScaleLine());

/*
  map.addLayer(new ol.layer.Tile({
    source: new ol.source.Geoportail('ORTHOIMAGERY.ORTHOPHOTOS', {
      gppKey: 'choisirgeoportail'
    })
  }));
*/
  map.addLayer (new ol.layer.Geoportail('GEOGRAPHICALGRIDSYSTEMS.PLANIGN', {
    gppKey: 'choisirgeoportail',
    visible: true,
    opacity: .5
  }));

  var vectorSource;
  var vectorLayer = new ol.layer.Vector({
    title: 'WFS-IGN',
    maxResolution: 10,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'rgba(0, 0, 255, 1.0)',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'rgba(255,255,255, .2)'
      })
    })
  })
  map.addLayer(vectorLayer);

  var curZoom;
  function setWFS() {
    var zoom = parseInt($("#zoom").val());
    var type = $('#typename').val();
    if (/bati/.test(type)) zoom = 14;
    if (/route|indif|parcelle/.test(type)) zoom = 16;
    if (/divcad/.test(type)) zoom = 13;
    curZoom = zoom;
    console.log(type, zoom);
    vectorSource = new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      url: function(extent) {
        return 'https://wxs.ign.fr/choisirgeoportail/geoportail/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&' +
          'typename='+type+'&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          'bbox=' + extent.join(',') + ',EPSG:3857';
      },
      //strategy: ol.loadingstrategy.bbox
      strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ minZoom: zoom, maxZoom: zoom, tileSize:512  }))
    });
    vectorLayer.setSource(vectorSource);
    var v = new ol.View({ zoom: zoom-1 });
    vectorLayer.setMaxResolution(v.getResolution());
    $('#curZoom').text(map.getView().getZoom()+' / '+curZoom);
  }
  setWFS();

  map.on('moveend', function(e) {
    $('#curZoom').text(map.getView().getZoom()+' / '+curZoom);
    if (map.getView().getZoom()<curZoom) $('#zoomTo').show();
    else $('#zoomTo').hide();
  });

  var sel = new ol.interaction.Select({
    multi: true,
    condition: ol.events.condition.click,
    hitTolerance: 3
  })
  map.addInteraction(sel)

  // Save Vector layer
  function save() {
    var format = new ol.format.GeoJSON();
    var features = vectorSource.getFeatures();
		var data = format.writeFeatures(features, {
			dataProjection: 'EPSG:4326',
			featureProjection: map.getView().getProjection()
    });
		var blob = new Blob([data], {type: "text/plain;charset=utf-8"});
		saveAs(blob, "map.geojson");
  }

	</script>
</body>
</html>